<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登入</title>
    <script src="http://static.geetest.com/v4/gt4.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="static/index.css">
     <style>
        .login-box{
            width: 400px;
            height: 600px;
            margin-right: auto;
            margin-left: auto;
            margin-top: 100px;

        }
    </style>
</head>

<body>
<div class="login-box">
    <div class="box">
        <!-- 登录 -->
        <div class="login">
            <div class="login_top">
                <img src="static/draw_1.jpg" alt="头像">
                <h2>欢迎登入</h2>
            </div>
            <div class="login_bottom">
                <form method="post">
                    {% csrf_token %}
                    <!-- 邮箱/手机号输入框 -->
                    <input type="text" class="input" placeholder="请输入邮箱" name="user" id="user"/>
                    <!-- 密码输入框 -->
                    <input type="Password" class="input" placeholder="请输入密码" name="pwd" id="pwd"/>
                   <div>
                       <input type="text"  placeholder="请输入验证码" name="check" id="check"/>
                       <img src="/img/code" width="90px" id="codeImage"></a>
                   </div>

                    <script>
                        $(function (){
                            $("#codeImage").click(function (){
                                var url=$(this).attr('src');
                                $(this).attr('src',url+"?");
                            });
                        })
                    </script>


                      <p>
                    <input type="checkbox">
                    <span>已阅读并同意协议</span>
                    <a href="#">忘记密码？</a>
                </p>
                <!-- 登录按钮 -->
                 <span style="color: red"> {{ text }}</span>
                <button type="button" id="register" onclick="myfunction()">登入</button>
                <p>
                    <span>第一次来到网站?</span>
                    <a href="register">注册</a>
                     <a href="logout">注销</a>

                </p>
                </form>
                <!-- 确认框/忘记密码 -->
                <script>
                    function myfunction() {
                    var mybutton = document.getElementById("register");
                    var name_one = document.getElementById("user");
                     var name_two = document.getElementById("pwd");
                    if (name_one.value == ""||name_two.value=="")
                        alert("没有输入")
                    else{
                         var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                         isok= reg.test(name_one.value);
                    if (!isok) {alert("请输入正确邮箱格式")
                    }
                    else {
                    mybutton.type = "submit";
                    mybutton.click();
                         }
                         }
                }
                </script>
            </div>
        </div>
    </div>
    </div>
</body>

</html>